<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-row>
                    <img :src="dataObj.icon" class="detail_img"
                            style="vertical-align: center;"/>
                </el-row>
                <el-row  style="margin-top: 15px;font-weight: bold; font-size: 20px;text-align: center;width: 100%; margin-left: 46%;">
                    - {{ dataObj.name }} -
                </el-row>
            </div>
        </template>
        <div v-if="!showResult" class="detail_tag_box ai_box">
            <div class="detail_title_box">
                <span>
                    文案标题
                </span>
                <!-- @input="updateTitle" -->
                <div class="detail_title borRadius clearfix">
                    <el-input class="detail_title_input" 
                        v-model="commitObj.title" 
                        maxlength="100"
                        placeholder="键入文章标题"
                        show-word-limit
                        type="text"
                    />
                </div>
            </div>
            <div class="detail_bg_box">
                <span>
                    内容
                </span>
                <div class="detail_bg borRadius"
                style="margin-top: 10px;">
                    <el-input 
                        v-model="commitObj.content" 
                        maxlength="5000"
                        placeholder="键入文字内容"
                        show-word-limit
                        type="textarea"
                        :rows="10"
                    />
                </div>
            </div>
            <div class="detail_btn_box">
                <el-button 
                class="fr detail_btn"
                    type="primary"
                    @click="toSearchRepeatFun">
                    提交检测
                </el-button>
            </div>
        </div>
        <div v-else class="showResult">
            <img src="" alt="">
            <div class="ti1">
                原创度：{{ commitObj.score }} %
            </div>
            <div class="ti2">
                
                <div v-if="commitObj.score < 65">
                    <el-row class="showResult_img">
                        <img src="../../public/showResult_g .png" alt="">
                    </el-row>
                    <el-row class="showResult_img">
                        原创度低于 65 分，不建议发布此文章。
                    </el-row>
                </div>
                <div v-else >
                    <el-row class="showResult_img">
                        <img src="../../public/showResult_r .png" alt="">
                    </el-row>
                    <el-row class="showResult_img">
                        原创度高于 65 分，建议发布此文章。
                    </el-row>
                </div>
            </div>  
            <div>
                <el-button @click="returnPre">
                    返回
                </el-button>
            </div>
        </div>
    </el-card>
</template>
    
<script setup>
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { computed, onMounted, ref} from "vue";
import {useStore} from 'vuex';
import {searchArticleRepeat} from '../api/index.js'

const route = useRoute();
const store = useStore();
const dataObj = ref({
       id:'',
      icon:"http://47.94.130.238/images/check-original.png",
      name:'',
});
const curUser = computed(() => store.state.curUser)
const commitObj = ref({
    title: '',
    content: '',
    score: 0
})
const showResult = ref(false)
onMounted(() => {
    let {searchContent, workList, curSelPos} = store.state;
    let pos = 0;
    for (let i = 0; i < searchContent.length; i++) {
        if (searchContent[i].id == workList[curSelPos]) {
            pos = i;
            break;
        }
    }
    console.log('ttt', searchContent[pos]);
    let tobj = searchContent[pos];
    dataObj.value.id = tobj.id
    dataObj.value.icon = tobj.icon
    dataObj.value.name = tobj.name
})
const toSearchRepeatFun = () => {
    let res = searchArticleRepeat(commitObj.value, curUser.value.token);
    res.then((dataP)=> {
        let {data} = dataP;
        if (data.code == 200) {
            commitObj.value.score = data.resp_data.score;
            showResult.value = !showResult.value;
        }
    }).catch(err=> console.log(err))
}
const returnPre = () => {
    showResult.value = !showResult.value;

}
</script>
    
<style scoped>
.detail_tag_box {
    width: 70%;
}
.detail_tag_box> div{
    margin-bottom: 20px;
}
.detail_tag {
    margin: 0;
    background-color: green;
    color: white;
    border-radius: 10px;
    width: 200px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}
.borRadius {
    border: 1px solid black;
    border-radius: 10px;
}
.detail_title_box {
    height: 60px;
}
.detail_title{
    position: relative;
    margin-top: 10px;
}
.detail_title_input, .detail_title_tip{
    position: absolute;
}
.detail_title_tip{
    right: 5px;
    top: 5px;
}
.detail_desc {
    background-color: aliceblue;
}
.detail_img {
    width: 50px;
    height: 50px;
}
.detail_desc_box{
    padding: 10px;
    background-color: beige;
}
.detail_btn {
    margin-bottom: 20px;
}
.ai_box{
    height: 500px;
    margin-bottom: 20px;
    overflow-y: auto;  /* 显示垂直方向滚动条 */
}
</style>